<template>
  <div class="userpart">
    <div class="header">用户管理</div>
    <div class="div-header">
      <div>
        <el-input
          style="width: 200px"
          v-model="input"
          placeholder="请输入内容"
        ></el-input>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="addFun">新增用户</el-button>
      </div>
    </div>
    <el-table  :data="tableData" style="width: 100%">
      <el-table-column fixed prop="date" label="用户名称" width="180">
      </el-table-column>
      <el-table-column prop="name" label="用户邮箱" width="180">
      </el-table-column>
      <el-table-column prop="name" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="岗位" width="180">
      </el-table-column>
      <el-table-column prop="name" label="部门" width="180"> 
      </el-table-column>
      <el-table-column prop="name" label="在职状态" width="180">
      </el-table-column>
      <el-table-column prop="name" label="创建时间" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-size="100"
      layout="total, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <el-dialog v-model="dialogFormVisible">
      <div class="header">新增用户</div>
      <el-form :model="form">
        <el-form-item>
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.badgte"
            placeholder="请输入员工工号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.nickName"
            placeholder="请输入真实姓名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.userEmai"
            placeholder="用户邮箱"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.mobile"
            placeholder="手机号码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.deptId" placeholder="--所在部门--">
            <el-option label="人力资源" value="ziyuan"></el-option>
            <el-option label="前端工程师" value="web"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.state" placeholder="--在职状态--">
            <el-option label="离职" value="0"></el-option>
            <el-option label="在职" value="1"></el-option>
            <el-option label="试用期" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addOkFun">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import {list} from '../../api/user'
export default defineComponent({
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      form: {
        mobile: "",
        userEmai: "",
        userName: "",
        nickName: "",
        state: "",
        badgte: "",
        deptId: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 添加用户
    addFun() {
      console.log("添加用户");
      this.dialogFormVisible = true;
      this.form.mobile = "";
      this.form.userEmai = "";
      this.form.userName = "";
      this.form.nickName = "";
      this.form.state = "";
      this.form.badgte = "";
      this.form.deptId = "";
    },
    // 添加遮罩层确定按钮
    addOkFun() {
      console.log({ ...this.form });
    },
    // 获取数据
    listFun(){
      list().then((res)=>{
        console.log(res);
      })
    }
  },
  created() {
    this.listFun()
  },
  setup() {
    return {
      input: ref(""),
    };
  },
});
</script>

<style lang="scss" scoped>
@import '../../style/scss.scss';
.userpart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  box-sizing: border-box;
  padding: 10px;
  .header {
    width: 100%;
    height: 30px;
    border-left: $border-left;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .div-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>